<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 300px;
            height: 500px;
            border: 1px solid red;
        }

        .content {
            border: none;
            column-width: 300px;
            column-gap: 20px;
            /* transform: translateX(-320px); */
            transition: all 1s;
            
        }



    </style>
</head>
<body>
    <div class="wrapper">

        <div class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, similique optio dolorem aspernatur exercitationem ipsum iure itaque commodi est? Natus inventore optio odio sint dolor aperiam voluptatum animi ipsum. Consequatur, maiores optio impedit molestias soluta ullam pariatur odit quidem in praesentium modi at minima, qui fugiat. Reprehenderit iure dolorum magni officia. Explicabo, doloremque. Velit minus ad beatae accusamus possimus ex laborum eum odit voluptatibus hic mollitia nulla quisquam error, iure maiores perspiciatis a, deserunt sapiente numquam, animi quae? Vero architecto nemo quas tempore repellendus nulla, natus, quasi sit perferendis, magnam fuga cupiditate vitae! Illum dolor omnis eum libero quidem officiis ducimus architecto corrupti recusandae repellat, saepe et, natus excepturi quam fugit reprehenderit praesentium hic provident enim. Id voluptas ipsa a nostrum voluptate unde aut quas itaque tempora sunt tempore ad cumque expedita vero corporis consectetur saepe molestias, libero modi blanditiis pariatur porro eaque. Modi harum nihil fugiat nobis, cupiditate eum deleniti distinctio saepe, quas magni officia commodi quia. Hic impedit natus dolore veniam nesciunt! Debitis commodi earum in, quia temporibus libero porro voluptatem ab, similique sequi delectus molestias sit dolorem exercitationem quaerat. Sunt, accusantium dicta? Quas aspernatur, illo explicabo in quasi quisquam vitae deleniti accusantium ipsa repudiandae ipsam assumenda, reiciendis sunt eligendi quam soluta officiis saepe quis nobis odit minima nam? Perspiciatis alias architecto vitae provident dolorum adipisci, quidem reprehenderit aliquid, sunt ab minima eveniet laborum voluptatem. Possimus quod maxime dolore numquam modi quisquam? Et dolore sit voluptates debitis! Facere atque dolorum dolore aperiam pariatur tempora, dolor nemo odit soluta error vitae? Eius, ullam. Corporis asperiores molestiae totam obcaecati provident. Delectus at esse porro blanditiis vitae, accusamus sunt quis iste optio ex laboriosam asperiores facilis id pariatur dolorem rem perferendis tenetur odio alias fuga? Perspiciatis temporibus sed similique dolore hic, libero quia fuga nobis quo ratione corrupti earum excepturi, vel omnis, aspernatur accusantium illum quis est voluptatum deleniti impedit possimus expedita. Ullam inventore quaerat ipsam corporis deleniti architecto id iste omnis ea? A reiciendis recusandae quia architecto dignissimos voluptatibus pariatur ducimus libero possimus quam error, magnam, suscipit voluptates hic explicabo est minima dolore deleniti consequatur soluta culpa quae? Consequatur nesciunt consectetur veniam eum? Eaque expedita ab maxime inventore ullam non est saepe soluta ipsa aut! Sunt at, ipsa ad nemo, ratione vero cumque nostrum molestiae saepe cupiditate dolorem. Aperiam, culpa minima exercitationem doloribus accusamus ea veniam qui eaque suscipit optio? Necessitatibus ut commodi est exercitationem explicabo corporis a non officia eius obcaecati? Molestias dignissimos similique, repellendus itaque omnis earum eaque corrupti, rerum ipsum excepturi doloribus aut culpa ea numquam vero cupiditate veritatis voluptate delectus pariatur. Repellat iste a iusto quis molestias provident dicta omnis aspernatur repudiandae nesciunt aliquid quasi aperiam itaque fugit id vel tenetur, fuga illum adipisci reprehenderit voluptate. Excepturi vero, adipisci modi inventore unde, officia repellat rerum voluptatibus at aperiam placeat quia officiis maiores, tempora dolorem neque est voluptates consequuntur aut. Quo quasi voluptas, labore aspernatur ab possimus nulla totam voluptatem omnis ducimus, sed, reiciendis perspiciatis et maiores ex. Eius nam ducimus, et deserunt quaerat corporis tenetur odio!
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis fugit magnam ratione atque alias, nulla aperiam sapiente quo illum, ducimus id eligendi, nam facilis ex minus. Fuga eveniet ipsam debitis, accusamus, reiciendis asperiores consequatur laboriosam rem harum natus soluta vel corporis saepe libero qui fugit alias quam dolore earum molestias! Omnis deleniti saepe sunt harum aliquam? Labore iste corrupti quibusdam dolores veniam voluptatum quasi. Repellendus fugiat nobis eaque architecto id ex dolores, illo, molestias quia suscipit, veniam sunt molestiae provident. Officia, veniam. Est cumque nam veniam culpa, repudiandae sapiente aspernatur ab cupiditate, eos quaerat eum nihil laboriosam illo earum impedit deleniti ad. Corrupti reprehenderit repellat libero alias dolor? Molestiae vitae quae dolorem, possimus placeat tempore quasi corrupti, blanditiis voluptatum, dolorum numquam? Voluptatum pariatur officia dolorem quia tempore? Numquam officiis totam porro atque optio explicabo laborum tempora unde consequatur voluptate. Ipsa veniam eos nam mollitia natus cumque nobis, odio minima libero molestias porro nesciunt tempora illum itaque dolor voluptatum, dolorum molestiae. Optio aut dolor alias repellat rerum reiciendis aliquid perspiciatis quisquam voluptatum amet officiis, sunt sed laborum tempora sapiente deleniti nulla tempore ab iusto dolorem suscipit repudiandae? Quisquam temporibus, necessitatibus asperiores corporis distinctio quam rerum quae ipsam aliquid optio quaerat velit eum repudiandae aspernatur debitis, magnam nulla officiis dolor nisi porro quod consequuntur odio eaque minus. Autem pariatur porro laudantium quia tenetur nobis ratione nemo corrupti error quae fugiat veniam corporis sunt quis officiis nam neque, veritatis sed. Laudantium id quasi sequi dolores fugit quia itaque? Tempora nemo repellat quos, autem quaerat eum iure ea porro architecto modi molestias atque ipsa, aliquid optio in harum unde odio fugiat? Fuga in velit ex aut veniam blanditiis voluptatum, dolore, voluptas maxime explicabo ab distinctio nostrum eius possimus est nisi quis. Perspiciatis, consectetur. Ipsa dicta nobis qui veritatis earum obcaecati ab ut ex, beatae sed, possimus labore incidunt optio vero rerum id tempora. Hic saepe illo dolore temporibus expedita iure dignissimos eum quos iusto placeat repellat quibusdam nihil inventore delectus, maxime in? Suscipit illum iste debitis exercitationem consequuntur modi temporibus nesciunt reiciendis quasi! Modi eum fugit laudantium quaerat. Rem obcaecati sint voluptates, harum in reiciendis suscipit labore aspernatur recusandae ipsa non temporibus minus id incidunt quis accusantium. Perferendis quasi exercitationem reprehenderit animi cumque quam, quaerat modi cum facere, possimus, illum sed maxime mollitia eos dolorum minus accusantium aspernatur et? Tempora ipsa, voluptatibus quae expedita illo aperiam nisi! Amet ipsa aut modi neque reiciendis quaerat rerum odio impedit repellendus et voluptatem, veritatis, alias doloribus saepe officia maxime minima sint consectetur unde? Nostrum officia molestias ipsum recusandae enim quia veritatis quod ad quidem dolorem nobis, quaerat rem. Aspernatur, corporis, laborum illo a veritatis molestias quis earum beatae totam ducimus dolores modi maxime corrupti excepturi illum neque fuga sint culpa. Beatae asperiores obcaecati, illum in laudantium repellendus. Voluptatibus sint unde odit ex laudantium quis architecto tempore, voluptas placeat, ipsum assumenda aut qui molestiae repudiandae a minus blanditiis excepturi. Facilis, repellat dolorem! Eum corrupti illum quisquam, magnam praesentium, molestias ipsam expedita, sit ea cumque modi. Nam repudiandae debitis sequi tempora, voluptas consequuntur temporibus inventore quisquam obcaecati omnis explicabo rerum velit maiores ut. Sed optio distinctio modi esse, accusantium neque error fugit qui consectetur quo omnis vero. Magnam, nulla fugit qui asperiores non adipisci id eveniet sint amet eius rerum officiis harum quis unde quae aut aliquid at temporibus dignissimos soluta tempora ullam nemo laudantium! Tenetur, facilis architecto? Blanditiis, minus? Earum commodi dolores debitis nam ipsam voluptatem voluptates, veniam quo, animi inventore officia nulla adipisci, saepe excepturi necessitatibus? Quas, necessitatibus voluptatem porro aspernatur amet beatae doloremque molestias a voluptas voluptates ratione? Molestias nam architecto necessitatibus magni repudiandae perferendis, atque cum totam dolorem iusto ratione, quam numquam rerum nulla a inventore, quo ut! Voluptatibus possimus, voluptates ad, officiis iusto, nemo facilis ratione obcaecati numquam autem consequatur! Quibusdam, aliquid sed. Fugiat totam quasi neque eaque nam magnam a, quia tenetur! Dolor veniam ducimus ipsam repellendus officia autem nam odio dolorum libero temporibus blanditiis officiis, sint itaque, eos laboriosam iusto! Earum dicta quod tempore nemo ad culpa accusamus non odit, rerum deserunt animi aspernatur sunt ratione obcaecati minima totam atque sint odio distinctio exercitationem assumenda in rem. Exercitationem qui molestiae architecto quasi, sit officia ratione corporis consequuntur dolores vitae voluptates reiciendis a molestias, explicabo, vero maxime neque? Omnis placeat magnam vitae id cupiditate eveniet sapiente, ratione voluptates soluta, aperiam repudiandae. Nihil earum quaerat ea, alias eligendi esse provident doloribus deleniti sunt a repellendus voluptatibus consequuntur laboriosam quam quisquam sequi. Id veniam, officia, modi cum atque eligendi repellat, a velit quos autem magnam dicta quaerat sequi maxime consequatur nesciunt nam tenetur facere. Corporis suscipit reiciendis pariatur adipisci facilis ipsam aliquam harum, nihil quam, quisquam ullam expedita at reprehenderit deleniti temporibus distinctio? Perferendis error sequi quis quo! Impedit velit placeat, ipsa neque atque adipisci quod culpa quaerat cupiditate blanditiis dicta suscipit obcaecati, porro aut earum incidunt sunt quas repellat, nam pariatur odit? Deserunt at a laborum doloribus quidem sed nam possimus, consequuntur quas placeat distinctio aliquid ipsam eos qui nostrum sapiente perspiciatis voluptatum, blanditiis unde! Esse necessitatibus ipsum cum, nisi voluptatibus veritatis adipisci laudantium autem modi optio odit mollitia inventore quos reprehenderit delectus ex dicta voluptatum id exercitationem. Esse labore suscipit illo, et sapiente voluptate veniam magnam, vel consequatur nihil quasi atque voluptas error cum aliquid totam iste! Pariatur, impedit. Harum et illum laboriosam error nostrum soluta natus unde ratione quas dolores numquam nihil, qui labore repudiandae consectetur distinctio repellendus molestias optio, nisi atque, aperiam beatae fugiat quia. Impedit incidunt optio, unde consequuntur necessitatibus, enim, debitis quidem odit ex laborum eos vel? A commodi veniam repellat fuga eius quos ex labore. Autem praesentium dolorem vitae voluptas architecto eligendi sed, odit obcaecati repellat modi explicabo doloribus sequi repudiandae beatae non pariatur recusandae, illo omnis necessitatibus saepe? Rem amet ab veritatis, necessitatibus saepe, minus odit magnam, veniam culpa aliquam id voluptatum? Officia dicta dignissimos ea corrupti distinctio. Natus reprehenderit quam ipsum adipisci iusto fuga veritatis modi vel! Consequatur, veritatis? Illo eligendi, tempore quaerat nisi tenetur cum voluptate sequi minima doloribus eveniet amet perferendis, a sint suscipit?
        </div>

    </div>
    <script>
        const wrapper = document.getElementsByClassName('wrapper')[0];
        const div = document.getElementsByClassName('content')[0];
        wrapper.onclick = function() {
            if(!div.count) {
                div.count = 0;
            }
            div.count ++;

            div.style.transform = `translateX(-${div.count * 320}px)`;

        }

    </script>
</body>
</html>